import { Outlet } from "umi";
import { useReactive } from "ahooks";
import { Layout } from "@douyinfe/semi-ui";

import PageLeftMenu from "../components/left.menu";

const { Content } = Layout;

const PlatformLayout = () => {
    const state = useReactive({
        leftSiderWidth: 160,
    });

    return (
        <Layout style={{ position: "fixed", left: 0, top: 91, width: state.leftSiderWidth, bottom: 0, right: 0 }}>
            <PageLeftMenu onChangeLeftSiderWidth={(newWidth) => (state.leftSiderWidth = newWidth)} />
            <Content id="main-body" style={{ backgroundColor: "var(--semi-color-fill-0)", position: "fixed", left: state.leftSiderWidth, top: 90, right: 0, bottom: 0 }}>
                <Outlet />
            </Content>
        </Layout>
    );
};

export default PlatformLayout;
